<template>
  <div>
    <ul class="addon_list flex flex-wrap">
      <!--选择的列表-->
      <li v-for="(item, key) in modelValue" :key="key">
        <div class="cover">
          <template v-for="(addon, k) in Object.keys(item.explain.addon_msg)" :key="k">
            <div v-if="addon && k < 4" class="addon_image">
              <el-image :src="item.explain.addon_msg[addon].icon" />
            </div>
          </template>
          <div class="close">
            <el-icon @click="closeAddon(key)"><Close /></el-icon>
          </div>
          <div v-if="Object.keys(item.explain.addon_msg).length > 4" class="count">{{ Object.keys(item.explain.addon_msg).length }}个</div>
        </div>
        <div class="title truncate">
          {{ item.name }}
        </div>
      </li>
      <!--新增按钮-->
      <li @click="onClick">
        <div class="add_addon">
          <el-icon><Plus /></el-icon>
        </div>
      </li>
    </ul>
    <!--选择应用组-->
    <el-dialog v-model="dialogTableVisible" :append-to-body="appendToBody" width="1000px" title="选择应用组">
      <dk-choose-addon-group
        ref="addonGroup"
        :key="dkChooseAddonGroupKey"
        :addon-group-value="modelValue"
        :addon-group-ids="addonGroupIds"
      />
      <div class="button">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Plus, Close } from '@element-plus/icons-vue'
import DkChooseAddonGroup from './DkChooseAddonGroup/index.vue'

defineOptions({
  name: 'DkAddonGroupSelect'
})

const props = defineProps({
  appendToBody: {
    type: Boolean,
    default: false
  },
  placeholder: {
    default: '',
    type: String
  },
  modelValue: {
    default: () => [],
    type: Array
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogTableVisible = ref(false)
const dkChooseAddonGroupKey = ref(0)
const addonGroup = ref(null)

const addonGroupIds = computed(() => {
  const ids = []
  props.modelValue.forEach((item) => {
    ids.push(item.id)
  })
  return ids
})

watch(
  () => props.modelValue,
  (newVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)

const closeAddon = (key) => {
  const newValue = [...props.modelValue]
  newValue.splice(key, 1)
  emit('update:modelValue', newValue)
}

const onClick = () => {
  dialogTableVisible.value = true
}

const onSubmit = () => {
  dkChooseAddonGroupKey.value++
  dialogTableVisible.value = false
  addonGroup.value.refreshList()
}
</script>

<style>
.addon_list li {
  cursor: pointer;
  position: relative;
  width: 80px;
  margin: 5px;
}

.addon_list .add_addon {
  border: 1px solid #ccc;
  text-align: center;
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 40px;
  color: #999;
}

.addon_list .cover {
  position: relative;
  height: 80px;
  border: 1px solid #ccc;
  border-bottom: 0;
  padding: 5px;
  overflow: hidden;
}

.addon_list .addon_image {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-bottom: 5px;
  float: left;
}

.addon_list .addon_image:nth-child(2n) {
  margin-right: 0;
}

.addon_list .cover img {
  width: 100%;
}

.addon_list .cover .close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  color: #fff;
  background: #409eff;
}

.addon_list .cover .count {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  color: #fff;
  background: #00000078;
}

.addon_list .cover:hover .close {
  display: block;
}

.addon_list .title {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.button {
  text-align: center;
  border-top: 1px solid #f5f5f5;
  padding-top: 10px;
}
</style>
